// 首先引入config，再引入模块header。由于，header依赖于jquery，index依赖与header，所以，index也中可以使用jQuery。
require(['./config'],()=>{
    require(['request','template','swiper','header'],(request,template,Swiper)=>{
        class Index{
            constructor(){                
                this.getTabs()
            }
            //轮播图
            banner(){
                new Swiper ('.banner', {
                    // // direction: 'vertical', // 垂直切换选项
                    // 如果需要分页器
                    // effect: 'flip',  //'flip'模式不适用
                    mousewheel: true,
                    speed: 500,
                    pagination: {
                    el: '.banner .swiper-pagination',
                    clickable:true,
                    dynamicBullets: true
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                    nextEl: '.banner .swiper-button-next',
                    prevEl: '.banner .swiper-button-prev',
                    },
                    //自动控制
                    autoplay: {
                    disableOnInteraction: false,                    
                    delay: 2000
                    },
                    slidesPerView : 5,//显示为5个slide                
                    keyboard: true // 键盘控制
                })
            }
            //获取title数据
            getTabs(){
                request.getTabs().then(resp =>{
                    const { list } = resp.data
                    const html = template('shops-template1',{list:list.slice(2,8)})
                    $('#shopL').html(html)
                    const arr = list.slice(2,8)
                    for(let i = 0; i < arr.length;i++){
                        $('h2').eq(i).html(arr[i].name)
                        $('.list-detail').eq(i).attr('id',arr[i].id)
                    }
                    this.getListDetail()
                    this.event()
                    this.eventpoint()
                })
            }
            //获取数据，并渲染页面
            getListDetail(){
                const id = []
                for(let i = 0; i < $('.list-detail').length;i++){
                    id.push($('.list-detail').eq(i).attr('id'))
                    request.getListDetail(id[i]).then(resp =>{
                        if(resp.code === 200){
                            const { list } = resp.data.items
                            const  {categories} = resp.data.categories                            
                            const html = template('getListDatilTemplate' + i,{list})
                            $(`#${id[i]}`).html(html)                             
                        }
                        this.banner() 
                    })
                }                          
            }
            // 导航追踪栏超过一定距离固定在顶部
            event(){
                window.onscroll=function(){
                    var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
                    if(scrolltop>160){
                        $('#navtip').css({'position':'fixed','top':'0',"width":"100%"})
                    }else{
                        $('#navtip').css('position','relative')
                    }
                }
            }
            //导航栏位置追踪
            eventpoint(){
                $('#shopL').on('click','a',(e)=>{
                    var start=document.documentElement.scrollTop || document.body.scrollTop;
                    const target = e.target
                    var i = $('#shopL a').index(target)                    
                    var end = $('h2').eq(i).offset().top
                    $('html, body').animate({scrollTop: $('h2').eq(i).offset().top},2000);
                })
            }
        }
        new Index()
    })
})
